<template>
	<view class="mine-page">
		<detail-head type="setting"></detail-head>
		<view class="mine-info">
			<view class="info-img">
				<image class="img" :src="user.wechatHeadimgurl" mode="aspectFit"></image>
			</view>
			<view class="info-vip">{{user.isVip === "Y" ? user.vipLevel ? user.vipLevel : '尊贵VIP' : '普通用户'}}</view>
			<view class="info-price" @click="goToPage('../wallet/wallet')"> {{user.balance}}</view>
			<view class="info-auth">{{user.idCard ? '已实名' : '未实名'}}</view>
			<view class="info-id">ID: {{user.id}}</view>
			<view class="info-name">{{user.wechatNickname}} <br> {{user.phone}}</view>
		</view>
		<view class="mine-addr">
			<view class="addr-label">钱包地址</view>
			<view class="addr-value">{{user.userCode ? setStringStylecode(user.userCode || '') : ''}}</view>
			<view class="addr-copy" @click="copyText(user.userCode)"></view>
		</view>
		<view class="mine-navs">
			<view class="nva-item">
				<view class="content" @click="goToPage('/pages/bill/bill')">
					<view class="img img1"></view>
					<view class="text">交易账单</view>
				</view>
			</view>
			<view class="nva-item">
				<view class="content" @click="goToPage('/pages/invitation/invitation')">
					<view class="img img2"></view>
					<view class="text">推广拉新</view>
				</view>
			</view>
			<view class="nva-item">
				<view class="content" @click="openPopup('synthesisRef')">
					<view class="img img3"></view>
					<view class="text">作品合成</view>
				</view>
			</view>
			<view class="nva-item">
				<view class="content" @click="goToPage('/pages/sale/sale')">
					<view class="img img4"></view>
					<view class="text">出售商品</view>
				</view>
			</view>
			<view class="nva-item">
				<view class="content" @click="goToPage('/pages/wallet/wallet')">
					<view class="img img5"></view>
					<view class="text">我的钱包</view>
				</view>
			</view>
			<view class="nva-item">
				<view class="content" @click="goToPage('/pages/setting/withdraw-setting')">
					<view class="img img6"></view>
					<view class="text">提现设置</view>
				</view>
			</view>
		</view>
		<view class="mine-tabs">
			<view class="prod-tab">
				<view @click="tabChange(1)" :class="['tab', active === 1 ? 'active': '']">已购买</view>
				<view @click="tabChange(2)" :class="['tab', active === 2 ? 'active': '']">已出售</view>
				<view @click="tabChange(3)" :class="['tab', active === 3 ? 'active': '']">挂售中</view>
			</view>
			<view class="tab-type">
				<checkbox-group @change="onTypeChange">
					<label>
						<checkbox value="box" color="#FFBD47" :checked="tabType" style="transform:scale(0.7)" />盲盒
					</label>
				</checkbox-group>
			</view>
		</view>
		<view class="mine-prod">
			<!-- 作品 -->
			<view class="list" v-show="active===1 && !tabType">
				<view class="item" v-for="item in prodHAVE" :key="item.id"
					@click="$tool.navigateTo(`/pages/mine/prod-list?code=${item.worksCode}`)">
					<view class="prod-status">折叠 {{item.total}}</view>
					<view class="prod-img">
						<image class="prod-img" :src="item.subPctureUrl" mode=""></image>
					</view>
					<view class="prod-info">
						<text class="name">{{item.worksName}}</text>
						<text class="other">作品编号 #{{item.worksNum}}</text>
					</view>
					<view class="prod-bay">
						<text class="price">￥ {{item.price}}</text>
						<text class="bay"></text>
					</view>
				</view>
			</view>
			<view class="list" v-show="active===2 && !tabType">
				<view class="item" v-for="item in prodSLL" :key="item.id"
					@click="$tool.navigateTo(`/pages/mine/sell-detail?id=${item.id}`)">
					<view class="prod-img">
						<image class="prod-img" :src="item.subPctureUrl" mode=""></image>
					</view>
					<view class="prod-info">
						<text class="name">{{item.worksName}}</text>
						<text class="other">作品编号 #{{item.worksNum}}</text>
					</view>
					<view class="prod-bay">
						<text class="price"></text>
						<text class="bay"></text>
					</view>
				</view>
			</view>
			<view class="list" v-show="active===3 && !tabType">
				<view class="item" v-for="item in prodINTHESELL" :key="item.id"
					@click="$tool.navigateTo(`/pages/mine/inSell-detail?id=${item.id}`)">
					<view class="prod-img">
						<image class="prod-img" :src="item.subPctureUrl" mode=""></image>
					</view>
					<view class="prod-info">
						<text class="name">{{item.worksName}}</text>
						<text class="other">作品编号 #{{item.worksNum}}</text>
					</view>
					<view class="prod-bay">
						<text class="price">￥ {{item.price}}</text>
						<text class="bay"></text>
					</view>
				</view>
			</view>

			<!-- 盲盒 -->
			<view class="list" v-show="active===1 && tabType">
				<view class="item" v-for="item in boxHAVE" :key="item.id" @click="goToInMineBoxDetail(item.id, 'HAVE')">
					<view class="prod-img">
						<image class="prod-img" :src="item.subPctureUrl" mode=""></image>
					</view>
					<view class="prod-info">
						<text class="name">{{item.boxName}}</text>
						<text class="other"><text>未开启</text></text>
					</view>
					<view class="prod-bay">
						<text class="price">￥ {{item.price}}</text>
						<text class="bay"></text>
					</view>
				</view>
			</view>
			<view class="list" v-show="active===2 && tabType">
				<view class="item" v-for="item in boxSLL" :key="item.id">
					<view class="prod-img">
						<image class="prod-img" :src="item.subPctureUrl" mode=""></image>
					</view>
					<view class="prod-info">
						<text class="name">{{item.boxName}}</text>
						<text class="other"><text>已卖出</text></text>
					</view>
					<view class="prod-bay">
						<text class="price"> </text>
						<text class="bay"></text>
					</view>
				</view>
			</view>
			<view class="list" v-show="active===3 && tabType">
				<view class="item" v-for="item in boxINTHESELL" :key="item.id"
					@click="goToInMineBoxDetail(item.id, 'INTHESELL')">
					<view class="prod-img">
						<image class="prod-img" :src="item.subPctureUrl" mode=""></image>
					</view>
					<view class="prod-info">
						<text class="name">{{item.boxName}}</text>
						<text class="other"><text>未开启</text></text>
					</view>
					<view class="prod-bay">
						<text class="price">￥ {{item.price}}</text>
						<text class="bay"></text>
					</view>
				</view>
			</view>

			<view class="hint">没有更多数据了~</view>
		</view>

		<uni-popup ref="synthesisRef" type="bottom">
			<view class="popup">
				<view class="title">选择合成通道</view>
				<view class="content">
					<view class="item" @click="goToPage('/pages/synthesis/synthesis')">
						<view class="img box"></view>
						<view class="text">
							方染之（溪光绕翠）作品合成
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		copyText,
		getUserinfo,
		setStringStylecode
	} from '../../utils/utils.js'
	import {
		getSysUser,
		getUserWork
	} from '../../request/mine.js'
	export default {
		data() {
			return {
				// 用户信息
				user: {},

				// 当前选中
				active: 1,
				// 产品切换
				tabType: false,

				// 作品 已购买
				prodHAVE: [],
				// 作品 已出售
				prodSLL: [],
				// 作品 挂售中
				prodINTHESELL: [],

				// 盲盒 已购买
				boxHAVE: [],
				// 盲盒 已出售
				boxSLL: [],
				// 盲盒 挂售中
				boxINTHESELL: [],

				// 查询参数
				params: {
					queryType: 'HAVE',
					productType: 'WORKS',
				},
				// 导入方法
				copyText,
				setStringStylecode
			}
		},

		created() {
			this.watchUpdateHaveBox()
			this.updateUserInfo()
			this.getLocalParams()
			this.tabChange(this.active)
		},
		methods: {
			// 打开弹框
			openPopup(val) {
				this.$refs[val].open('buttom')
			},

			// 关闭弹框
			closePopup(val) {
				this.$refs[val].close()
			},

			// 
			watchUpdateHaveBox() {
				let bool = uni.getStorageSync('updateBox')
				if (bool) {
					this.boxHAVE = []
					uni.removeStorageSync('updateBox')
				}
			},

			// 获取本地参数
			getLocalParams() {
				let str = uni.getStorageSync('MineQyeryParams')
				if (str) {
					let local = JSON.parse(str)
					this.active = local.active
					this.tabType = local.tabType
				}
			},

			// 设置本地参数
			setLocalParams() {
				uni.setStorageSync('MineQyeryParams', JSON.stringify({
					active: this.active,
					tabType: this.tabType,
				}))
			},

			// 跳转到 盲和详情
			goToInMineBoxDetail(id, state) {
				this.$tool.navigateTo(`/pages/mine/box-detail?id=${id}&state=${state}`)
			},

			goToPage(url) {
				if (url === '../sale-list/sale-list') {
					if (this.config.sale_btn) {
						this.$tool.navigateTo(url)
					} else {
						uni.showToast({
							title: '通道暂时关闭，请耐心等待',
							icon: 'none'
						})
					}
				} else {
					if (url === '/pages/synthesis/synthesis') {
						this.closePopup('synthesisRef')
						if (this.config.isOpenComposite) {
							this.$tool.navigateTo(url)
						} else {
							uni.showToast({
								title: '通道暂时关闭，请耐心等待',
								icon: 'none'
							})
						}
					} else {
						this.$tool.navigateTo(url)
					}
				}
			},

			// 类型切换
			onTypeChange(e) {
				this.tabType = e.detail.value[0] === 'box' ? true : false
				this.tabChange(this.active)
				this.setLocalParams()
			},


			// tab 切换
			tabChange(index) {
				this.active = index
				let queryType = 'HAVE'
				let productType = this.tabType ? 'BOX' : 'WORKS'
				if (this.tabType) {
					if (index === 1) {
						if (this.boxHAVE.length === 0) {
							queryType = 'HAVE'
							this.onLoadListData(queryType, productType).then((res) => {
								this.boxHAVE.push(...res.blingBoxVOList)
							})
						}
					} else if (index === 2) {
						if (this.boxSLL.length === 0) {
							queryType = 'SELL'
							this.onLoadListData(queryType, productType).then((res) => {
								this.boxSLL.push(...res.blingBoxVOList)
							})
						}
					} else {
						if (this.boxINTHESELL.length === 0) {
							queryType = 'INTHESELL'
							this.onLoadListData(queryType, productType).then((res) => {
								this.boxINTHESELL.push(...res.blingBoxVOList)
							})
						}
					}
				} else {
					if (index === 1) {
						if (this.prodHAVE.length === 0) {
							queryType = 'HAVE'
							this.onLoadListData(queryType, productType).then((res) => {
								this.prodHAVE.push(...res.worksPageVOList)
							})
						}
					} else if (index === 2) {
						if (this.prodSLL.length === 0) {
							queryType = 'SELL'
							this.onLoadListData(queryType, productType).then((res) => {
								this.prodSLL.push(...res.worksPageVOList)
							})
						}
					} else {
						if (this.prodINTHESELL.length === 0) {
							queryType = 'INTHESELL'
							this.onLoadListData(queryType, productType).then((res) => {
								this.prodINTHESELL.push(...res.worksPageVOList)
							})
						}
					}
				}
				this.setLocalParams()
			},

			// 加载数据
			async onLoadListData(queryType, productType) {
				uni.showLoading({
					title: '加载中'
				})
				let result = {}
				try {
					let {
						code,
						data,
						message
					} = await getUserWork({
						queryType: queryType,
						productType: productType
					})
					if (code === 200) {
						result = data
						uni.hideLoading()
					} else {
						uni.hideLoading()
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch {
					uni.hideLoading()
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
				return result
			},

			// 更新用户数据
			async updateUserInfo() {
				try {
					let {
						code,
						data
					} = await getSysUser()
					if (code === 200) {
						let user = JSON.parse(uni.getStorageSync('user'))
						user = {
							...user,
							...data
						}
						this.user = user
						if (this.user.wechatHeadimgurl.indexOf('http') === -1) {
							this.user.wechatHeadimgurl = '../../static/img/footer.png'
						}
						uni.setStorageSync('user', JSON.stringify(user))
						if (!this.user.idCard) {
							uni.showToast({
								title: '请先完成用户实名登记',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '../real-name/real-name',
									animationType: 'pop-in',
									animationDuration: 200
								})
							}, 500)
						}
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch {
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		width: 100%;
		min-height: 100vh;
		padding: 0 0 40rpx 0;
		background: $mine-back-url no-repeat;
		background-position: top left;
		background-size: 100% auto;
		padding-top: var(--status-bar-height);
	}

	.mine-info {
		width: 100%;
		height: 550rpx;
		position: relative;

		.info-img {
			width: 188rpx;
			height: 188rpx;
			background-image: linear-gradient(321deg, rgba(255, 189, 71, 1), rgba(133, 92, 69, 1));
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 50%;
			top: 200rpx;
			transform: translateX(-50%);

			.img {
				width: 175rpx;
				height: 175rpx;
				border-radius: 50%;
				background-color: #000000;
			}
		}

		.info-vip {
			width: 228rpx;
			height: 100rpx;
			background: $mine-vip-url no-repeat;
			background-position: -30rpx center;
			background-size: 228rpx 160rpx;
			position: absolute;
			left: 50%;
			top: 330rpx;
			transform: translateX(-50%);
			padding-left: 80rpx;
			line-height: 100rpx;
			color: #CDB17C;
			font-size: 24rpx;
			letter-spacing: 4rpx;
		}

		.info-id,
		.info-price,
		.info-auth {
			min-width: 120rpx;
			max-width: 210rpx;
			height: 52rpx;
			background: rgba(0, 0, 0, 0);
			border-radius: 26rpx;
			border: 2rpx solid transparent;
			border-radius: 12rpx;
			border-image: linear-gradient(90deg, rgba(83, 83, 83, 0), rgba(83, 83, 83, 1)) 1 1;
			background: $mine-price-url no-repeat;
			background-position: center left;
			background-size: 32rpx 32rpx;
			padding-left: 34rpx;
			background-clip: padding-box;
			position: absolute;
			left: 520rpx;
			top: 240rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #838383;
			line-height: 52rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.info-auth {
			left: 50rpx;
			top: 240rpx;
			border-image: linear-gradient(90deg, rgba(83, 83, 83, 1), rgba(83, 83, 83, 0)) 1 1;
			background: $mine-auth-url no-repeat;
			background-size: 32rpx 32rpx;
			background-position: 4rpx 10rpx;
			padding-left: 38rpx;
		}
		.info-id {
			left: 50%;
			top: 50rpx;
			background: none;
			transform: translateX(-50%);
			border-image: linear-gradient(90deg, rgba(83, 83, 83, 1), rgba(83, 83, 83, 0)) 1 1;
		}

		.info-name {
			width: 100%;
			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #9D9D9D;
			text-align: center;
			position: absolute;
			left: 0rpx;
			bottom: 20rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.mine-addr {
		width: 100%;
		height: 130rpx;
		background: $mine-addr-url no-repeat;
		background-position: 0 -48rpx;
		background-size: 100% 260rpx;
		display: flex;
		align-items: center;
		padding: 0 50rpx;
		margin: 8rpx 0 50rpx 0;

		.addr-label {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #BFCBCD;
			padding-left: 50rpx;
		}

		.addr-value {
			flex: 1;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #7B7B7B;
			padding-left: 40rpx;
		}

		.addr-copy {
			width: 84rpx;
			height: 80rpx;
			background: $mine-copy-url no-repeat;
			background-position: center center;
			background-size: 34rpx 34rpx;
		}
	}

	.mine-navs {
		width: 100%;
		height: 400rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.nva-item {
			width: 33%;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.content {
				width: 104rpx;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;

				.img {
					width: 100%;
					height: 100rpx;
					background: $mine-menu-1-url no-repeat;
					background-position: center center !important;
					background-size: 104rpx 100rpx !important;
				}

				.img1 {
					background: $mine-menu-1-url no-repeat;
				}

				.img2 {
					background: $mine-menu-2-url no-repeat;
				}

				.img3 {
					background: $mine-menu-3-url no-repeat;
				}

				.img4 {
					background: $mine-menu-4-url no-repeat;
				}

				.img5 {
					background: $mine-menu-5-url no-repeat;
				}

				.img6 {
					background: $mine-menu-6-url no-repeat;
				}

				.text {
					width: 100%;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #BFCBCD;
					text-align: center;
				}
			}
		}
	}

	.mine-tabs {
		width: 100%;
		padding: 0 40rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.prod-tab {
			width: 400rpx;
			display: flex;
			justify-content: space-between;

			.tab {
				height: 48rpx;
				width: 100rpx;
				font-size: 16px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #BFCBCD;
				text-align: center;
			}

			.active {
				color: #FFBD47;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.active:after {
				content: "";
				width: 44rpx;
				height: 2rpx;
				margin-top: 4rpx;
				border-radius: 10rpx;
				box-shadow: -4rpx -4rpx 12rpx 0px rgba(70, 75, 86, 0.23), 4rpx 4rpx 12rpx 0px rgba(0, 0, 0, 0.83);
				border: 4rpx solid #FFBD47;
				background-color: #FFBD47;
			}
		}

		.tab-type {
			width: 140rpx;
			height: 50rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #BFCBCD;

			/deep/ uni-checkbox .uni-checkbox-input {
				background: none !important;
			}

			/deep/ .uni-checkbox-input-checked {
				border-color: #FFBD47 !important;
			}

			/deep/ .uni-checkbox-input:hover {
				border-color: #FFBD47 !important;
			}
		}
	}

	.mine-prod {
		width: 100%;
		min-height: 600rpx;
		padding: 0 20rpx;
		margin-top: 50rpx;

		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.item {
				width: 334rpx;
				height: 540rpx;
				margin-bottom: 40rpx;
				background: linear-gradient(218deg, #3E454D 0%, #26252A 100%);
				box-shadow: -6rpx -6rpx 16rpx 0px rgba(70, 75, 86, 0.54), 6rpx 6rpx 16rpx 0px rgba(0, 0, 0, 0.83);
				border-radius: 32rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				.prod-img {
					width: 334rpx;
					height: 334rpx;
					overflow: hidden;
					border-radius: 32rpx;
					background-color: #474A51;

					.img {
						width: 334rpx;
						height: 334rpx;
					}
				}

				.prod-status {
					width: 180rpx;
					height: 70rpx;
					line-height: 70rpx;
					text-indent: 10rpx;
					position: absolute;
					top: -2rpx;
					left: -2rpx;
					z-index: 1;
					background: $mine-prod-back-url no-repeat;
					background-position: top left;
					background-size: 100% 100%;
					font-size: 16px;
					font-family: YouSheBiaoTiHei;
					color: #BFCBCD;
				}


				.prod-info {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-top: 30rpx;
					color: #BFCBCD;

					.name {
						width: 300rpx;
						font-size: 32rpx;
						font-weight: bold;
						line-height: 48rpx;
						margin-bottom: 10rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.other {
						width: 100%;
						font-size: 24rpx;
						font-weight: 400;
						line-height: 18px;
						margin-bottom: 14rpx;

						text {
							color: #FFBD47;
						}
					}
				}

				.prod-bay {
					width: 100%;
					width: 310rpx;
					display: flex;
					justify-content: space-between;

					.price {
						min-width: 100rpx;
						height: 50rpx;
						background: #FFBD47;
						border-radius: 26rpx;
						font-size: 24rpx;
						font-family: SourceHanSansCN-Bold, SourceHanSansCN;
						font-weight: bold;
						color: #1B1D24;
						line-height: 50rpx;
						padding: 0 10rpx;
					}

					.bay {
						width: 50rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: -12rpx -12rpx 24rpx 0px rgba(66, 69, 76, 0.54), 12rpx 12rpx 24rpx 0px rgba(0, 0, 0, 0.83);
						border: 2rpx solid #FFBD47;
						border-radius: 50%;
						background: $common-right-url no-repeat;
						background-size: 60% 60%;
						background-position: center center;
						background-color: #1B1D24;
						margin-right: 15rpx;
					}
				}
			}
		}

		.hint {
			text-align: center;
			font-size: 14px;
			font-family: YouSheBiaoTiHei;
			color: #b1bcbd;
			line-height: 22px;
		}
	}

	.popup {
		width: 100%;
		min-height: 300rpx;
		padding: 0 40rpx;
		background: $login-resetbakc-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;

		.title {
			line-height: 60rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #BFCBCD;
		}

		.content {
			width: 100%;
			height: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.item {
				width: 100%;
				margin: 0 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.img {
					width: 88rpx;
					height: 88rpx;
					margin-bottom: 10rpx;
				}

				.prod {
					background: $mine-prod-url no-repeat;
					background-size: 100% 100%;
					background-position: center center;
				}

				.box {
					background: $mine-box-url no-repeat;
					background-size: 100% 100%;
					background-position: center center;
				}

				.text {
					font-size: 16px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #9D9D9D;
				}
			}
		}
	}
</style>
